﻿<%@ Page Language="C#" AutoEventWireup="true" Inherits="OAuthLogin" Codebehind="OAuthLogin.aspx.cs" Async="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
 background: #C0DEED url('http://a3.twimg.com/a/1258420634/images/bg-clouds.png') repeat-x;
}

.boxlite
{
	width: 303px;
	height: 22px;
	padding: 1px;
	background: #fff;
	margin: 0px 3px 0px 0px;
	font-size: 12px;
	font-family: arial, sans-serif;
	position: relative;
}

.boxlite div.blip
{
	position: absolute;
	top: 2px;	
	background: #AFBFCD;
	height: 20px;
	width: 25px;	
	display: block;	
	float: left;
}

.boxlite div.blah
{
	background: #4499DD;
	color: #fff;
	font-weight: bold;
	padding: 2px 1px 0px 5px;
	margin: 2px 3px 0px 2px;
	height: 16px;
}
</style>
<!--[if IE]>
	<style>
	.boxlite { 	height: 26px;	 }
	.boxlite div.blah { 	padding: 3px 1px 2px 5px; }
	</style>
<![endif]-->
<script type="text/javascript" lang="javascript">
function dojazz()
{
	setTimeout("beginInflate('inner1');",  500);
	setTimeout("beginInflate('inner2');", 1000);
	setTimeout("beginInflate('inner3');", 1500);
	setTimeout("beginInflate('inner4');", 2000);
	setTimeout("beginInflate('inner5');", 2500);
	setTimeout("beginInflate('inner6');", 3000);
	setTimeout("beginInflate('inner7');", 3500);
	setTimeout("beginInflate('inner8');", 4000);
	setTimeout("beginInflate('inner9');", 4500);
	setTimeout("beginInflate('innerA');", 5000);	
	setTimeout("beginInflate('innerB');", 5500);
	setTimeout("beginInflate('innerC');", 6000);

	setTimeout("setDisplay('inner1','none');", 7000);
	setTimeout("setDisplay('inner2','none');", 7000);
	setTimeout("setDisplay('inner3','none');", 7000);
	setTimeout("setDisplay('inner4','none');", 7000);
	setTimeout("setDisplay('inner5','none');", 7000);
	setTimeout("setDisplay('inner6','none');", 7000);
	setTimeout("setDisplay('inner7','none');", 7000);
	setTimeout("setDisplay('inner8','none');", 7000);
	setTimeout("setDisplay('inner9','none');", 7000);
	setTimeout("setDisplay('innerA','none');", 7000);	
	setTimeout("setDisplay('innerB','none');", 7000);	
	setTimeout("setDisplay('innerC','none');", 7000);	
	
	setTimeout("setDisplay('delay','');", 7000);	
}

function beginInflate(controlName)
{
	setTimeout("inflate('" + controlName + "', 0, 24, '#A6BBCC')", 100);
	setTimeout("inflate('" + controlName + "', 1, 22, '#9BB6CB')", 200);
	setTimeout("inflate('" + controlName + "', 1, 22, '#8EB1CB')", 250);
	setTimeout("inflate('" + controlName + "', 2, 20, '#80ABCD')", 300);	
	setTimeout("inflate('" + controlName + "', 2, 20, '#70A5D0')", 350);
	setTimeout("inflate('" + controlName + "', 3, 18, '#5C9FD5')", 400);	
	}

function inflate(controlName, top, height, color)
{
	var control = document.getElementById(controlName);
	control.style.top = top + "px";
	control.style.height = height + "px";
	control.style.background  = color;
}

function setDisplay(controlName, disp)
{
	var control = document.getElementById(controlName);
	control.style.display = disp;
}
</script>
</head>

<body onload="javascript:dojazz();">
<form id="form" runat="server" >

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    
    <center>
        <table cellpadding="0" cellspacing="0" border="0" width="750" style="text-align:left; margin-top: 30px;">
        <tr>
            <td valign="middle">  
                <div style="width:100%; height:100%; background: url(http://blog.twipler.com/twipler/siteimages/white-alpha-thick.png); padding:10px; font-family: verdana, arial, sans-serif;">
                    <div style="background: #fff; padding: 15px 10px 20px 10px;">
                        <table cellpadding="0" cellspacing="0" border="0" width="100%">
                        <tr>
                            <td align="center" valign="middle">
                                <img src="http://a3.twimg.com/client_application_images/19227/twipler-small.jpg"  />
                            </td>
                            <td align="left" valign="middle">
                                <h2 style="color: #247; margin-top: 10px; margin-bottom:5px;">Authenticating....</h2>
                                <p style="color: #49d; font-size:12px; margin:4px;">Mixing potions, fluffing pillows and baking you a cake.</p>
						        <div class="boxlite">
							        <div id="inner1" class="blip" style="left:  2px;">&nbsp;</div>
							        <div id="inner2" class="blip" style="left: 27px;">&nbsp;</div>
							        <div id="inner3" class="blip" style="left: 52px;">&nbsp;</div>
							        <div id="inner4" class="blip" style="left: 77px;">&nbsp;</div>
							        <div id="inner5" class="blip" style="left:102px;">&nbsp;</div>
							        <div id="inner6" class="blip" style="left:127px;">&nbsp;</div>
							        <div id="inner7" class="blip" style="left:152px;">&nbsp;</div>
							        <div id="inner8" class="blip" style="left:177px;">&nbsp;</div>
							        <div id="inner9" class="blip" style="left:202px;">&nbsp;</div>
							        <div id="innerA" class="blip" style="left:227px;">&nbsp;</div>
							        <div id="innerB" class="blip" style="left:252px;">&nbsp;</div>
							        <div id="innerC" class="blip" style="left:277px;">&nbsp;</div>
							        <div id="delay"  class="blah" style="display:none;">Taking longer than expected, please wait...</div>
						        </div>
						    </td>
						</tr>
						</table>
                    </div>
                    
                </div>
            </td>
        </tr>
        </table>
        
    </center>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate></ContentTemplate><Triggers><asp:AsyncPostBackTrigger ControlID="tickNow" /></Triggers></asp:UpdatePanel>
<asp:Timer ID="tickNow" runat="server" Interval="50" OnTick="tickNow_Update" />
    </form>
</body>
</html>
